<template>
  <div>
  <div class="index">
  <el-upload
    v-model="fileList"
    class="upload-demo"
    :auto-upload="false"
    :limit="1"
    :on-change="handleChange"
  >
    <el-button type="primary">Click to upload</el-button>
  </el-upload>
</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getFileMd5 } from './method'
 
const fileList = ref([])
 
// 文件上传 选择文件时触发(:on-change事件)
const handleChange = async (uploadFile, uploadFiles) => {
  // 文件信息
  let fileRaw = uploadFile.raw
  console.log(fileRaw)
  // 获取 文件的 MD5唯一标识码
  let fileMd5 = null
  try {
    fileMd5 = await getFileMd5(fileRaw)
  } catch(e) {
    console.error('[error]', e)
  }
  if(!fileMd5) return
  // 每片的大小为 5M 可调整
  const chunkSize = 5 * 1024 * 1024
  // 文件分片储存
  let chunkList = []
  function chunkPush(page = 1) {
    chunkList.push(fileRaw.slice((page - 1) * chunkSize, page * chunkSize))
    if(page * chunkSize < fileRaw.size) {
      chunkPush(page + 1)
    }
  }
  chunkPush()
  console.log(chunkList, 'chunkList----->>>')
  saveFileChunk(chunkList, fileMd5, fileRaw.name)
}
// 保存文件片段到后台
const saveFileChunk = async (chunkList, fileMd5, fileName) => {
  for(let i = 0; i < chunkList.length; i++) {
    let formData = new FormData()
    formData.append('chunk', i) // 当前片段的索引
    formData.append('chunkSize', 5 * 1024 * 1024) // 切片的文件分片大小 (就是以多少字节进行分片的，这里是5M)
    formData.append('chunks', chunkList.length) // 共有多少分片
    formData.append('file', chunkList[i]) // 当前分片的文件流
    formData.append('md5', fileMd5) // 整个文件的MD5唯一标识码，不是分片
    formData.append('name', fileName) // 文件的名称
    formData.append('size', chunkList[i].size) // 当前切片的大小（最后一片不一定是5M）
    // const data = await saveFileChunk(formData)
    // if(data && data.success) {
    //   console.log('保存成功')
    // }
    this.axios.post('',formData).then(res=>{
        
    })
  }
}
</script>

<style>

</style>